<template>
    <a-layout id="basic-app-layout">
        <a-layout>
            <v4-sider :menu-info="menuInfo" />
            <main class="ant-layout-content basic-app-container" id="ricebird-app-container" ref="container">
                <router-view v-slot="{ Component }" v-if="viewPermission">
                    <component :is="Component" :key="`${currentPath.value}-${app.currentUser.ver}`" />
                </router-view>
                <no-permission v-else />
            </main>
        </a-layout>
    </a-layout>
</template>

<script setup>
import app from '@/app'
import router from '@/routers'
import V4Sider from './components/v4-sider.vue'
import { ref, watch, provide } from 'vue';

// --- useMenu --- //
let menuInfo = router.useMenus();
let { menus, openKeys, selectedKeys, onMenuClick, currentPath, menuVersion } = menuInfo;
const viewPermission = ref(false);
watch(menuVersion, nv => {
    viewPermission.value = currentPath.allAccess || app.succeed(currentPath.path);
}, { immediate: true })

// --- 容器 --- //
const container = ref();
provide("app-container", container);
</script>

<style lang="less">
#app {
    background: #fff;
}

#basic-app-layout {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .ant-layout {
        background: #fff;
    }

    .basic-app-container {
        height: calc(100vh);
        flex: 1;
        overflow: auto;
    }
}
</style>
